<template>
  <view v-if="!!data.length" class="cart whf" :key="refresh">
    <scroll-view class="whf" scroll-y>
      <view class="add">
        <view class="mac-ico-location-fill"></view>
        <view class="add-info-box" v-if="addressInfo && addressInfo.id" @click="selectAddress">
          <view class="add-info">
            <view class="add-name">{{ addressInfo.name }}</view>
            <view class="add-phone">{{ addressInfo.phone }}</view>
          </view>
          <view class="add-add">{{ addressInfo.addr }}</view>
        </view>
        <view v-else class="add-select" @click="selectAddress">请选择收货地址</view>
      </view>
      <GoodsItem class="wf" v-for="(i, ii) in data" :key="ii" :modelValue="i._goods" v-model:sum="i.sum" row edit
        @del="del(ii)" @updatesum="updateSum($event, ii)" />
      <view class="bottom bottomt" style="position:relative" />
    </scroll-view>
    <view class="bottom x jc">
      <view class="mac-ico-jiage">{{ total }}</view>
      <view class="ml1em fg1 xcc hf" @click="pay">立即支付</view>
    </view>
    <SelectAddressi v-model:addShow="addShow" ref="addref" @selectAddr="selectAddr" />
  </view>
  <view class="xcc whf cb mac-ico-cart" v-else><text>空空如也~!赶快去选购吧</text></view>
</template>
<script lang="ts">
  import GoodsItem from "@/components/GoodsItem.vue";
  import SelectAddressi from "@/components/SelectAddress.vue";
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "cart",
    components: { GoodsItem, SelectAddressi },
    // props: {modelValue:{type:Object,default(){return {};}}},
    // watch:{modelValue:{handler(n,o){this.init();},deep:true}},
    data() {
      return {
        data: [] as gt.sql.stock[],
        total: "",
        refresh: 0,
        addressInfo: {} as gt.sql.addr,
        addShow: false,
      };
    },
    // computed:{},
    // onLoad(p) { },
    // created() {  },
    // onPullDownRefresh() {uni.stopPullDownRefresh();},
    async onShow() {
      this.init();
      if (this.addShow) {
        try {
          // @ts-ignore
          await this.$refs.addref.getAddd();
        } catch (_) { }
      }
    },
    methods: {
      async init() {
        this.data = await format.stock(uni.getStorageSync("cart") || []);

        let m = 0;
        this.data.forEach(e => {
          m += e._goods.money * e.sum;
        });
        this.total = Number(m / 100).toFixed(2);
      },
      async relPay(o: obj) {
        const ks = Object.keys(o);
        for (const k of ks) {
          const r = await request(o[k], "wxpay");
          r.success = () => {
            uni.setStorageSync("stock", []);
            request({ id: r.id }, "checkPay");
          };
          // #ifndef H5
          try { uni.requestPayment(r); } catch (_) { }
          // #endif
          this.data = this.data.filter(e => e.gid !== k);
        }
        uni.setStorageSync("cart", this.data.map(e => ({ gid: e.gid, goods: e.goods, sum: e.sum })));
      },
      async pay() {
        if (!this.addressInfo?.id) {
          this.addShow = true;
          return;
        }
        const o: obj = {};
        this.data.forEach(e => {
          if (e.goods && e.sum > 0) {
            if (!o[e.gid]) {
              o[e.gid] = { gid: e.gid, content: [] };
            }
            o[e.gid].content.push({ goods: e.goods, sum: e.sum });
            o[e.gid].addr = this.addressInfo.id;
          }
        });

        const l = Object.keys(o).length;
        if (l > 1) {
          uni.showModal({
            title: "多次支付提示",
            content: `本次支付由于涉及多商户订单,供须支付[${l}]次`,
            success: (res) => {
              if (res.confirm) {
                this.relPay(o);
              }
            }
          });
        } else {
          this.relPay(o);
        }
        // const r = await request({ goods: this.data.map(e => { return { gid: e.gid, goods: e.goods, sum: e.sum }; }) }, "wxpay");
        // console.log(r);
        // r.data.success = () => {
        //   uni.setStorageSync("stock", []);
        //   request({ id: r.data.id }, "checkPay");
        // };
        // uni.requestPayment(r.data);
      },
      del(i: number) {
        this.data.splice(i, 1);
        uni.setStorageSync("cart", this.data.map(e => {
          return { gid: e.gid, goods: e.goods, sum: e.sum };
        }));
        this.init();
      },
      async updateSum(sum: number, i: number) {
        this.data[i].sum = sum;
        uni.setStorageSync("cart", this.data.map(e => { return { gid: e.gid, goods: e.goods, sum: e.sum }; }));
        let m = 0;
        this.data.forEach(e => {
          m += e._goods.money * e.sum;
        });
        this.total = Number(m / 100).toFixed(2);
        await this.$nextTick();
        this.refresh ^= 1;
      },
      selectAddress() {
        this.addShow = true;
      },
      selectAddr(res: gt.sql.addr) {
        this.addressInfo = res;
        this.addShow = false;
      }
    },
    // mounted() { }, {"in":[],"out":["1802593426564009986","1802593426564009987","1802593426564009988"]}
  });
</script>
<style lang="scss" scoped>
  .cart {
    position: relative;
    background-color: #f8f8f8;
    padding: .3em .5em;

    .bottomt {
      background: none !important;
    }

    .bottom {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 3.5em;
      padding: .5em;
      background-color: #fff;

      :not(.c) {
        font-size: 1.4em;
      }

      :first-child {
        color: $uni-color-error;
        font-size: 1em;
      }

      :last-child {
        background-color: $uni-color-error;
        color: #fff;
        font-size: 1.2em;
        border-radius: 2em;
      }
    }
  }

  .mac-ico-cart {
    color: #828282;

    >text {
      margin-left: .3em;
    }
  }

  .add {
    display: flex;
    padding: 10rpx 0;

    .mac-ico-location-fill {
      color: #666666;
      font-size: 1.6em;
      color: #ff9800;
    }

    &-info-box {
      margin-left: 10rpx;
    }

    &-info {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    &-name {
      margin-right: 10rpx;
      background-color: #ff9800;
      color: #FFFFFF;
      border-radius: .2em;
      padding: 4rpx 10rpx;
      font-size: .8em;
      margin-bottom: .3em;
    }

    // &-phone{ }
    &-select {
      margin-left: 10rpx;
      padding: 4rpx 10rpx;
      background-color: #ff9800;
      color: #FFFFFF;
      border-radius: .2em;
      font-size: 1em;
    }
  }
</style>